<template>
    <view class="bg-content">
        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="background-color: white; text-align: center; width: 1600px; overflow: auto;">
                <div class="tr">
                    <div class="td text-center bold" style="width: 100px">商品规格</div>
                    <div class="td text-center bold" style="width: 100px">商品颜色</div>
                    <div class="td text-center bold" style="width: 150px">成本价（单位/元）</div>
                    <div class="td text-center bold" style="width: 200px">价格（单位/元）</div>
                    <div class="td text-center bold" style="width: 150px">市场价（单位/元）</div>
                    <div class="td text-center bold" style="width: 100px">库存数量</div>
                    <div class="td text-center bold" style="width: 100px">显示顺序</div>
                    <div class="td text-center bold" style="width: 600px">促销活动</div>
                    <div class="td text-center bold" style="width: 100px">操作</div>
                </div>
                <div class="tr" v-for="(data, index) in tbGoodsSpecificationColorList" :key="data.id">
                    <div class="td" style="width: 100px">{{data.tbGoodsSpecification.name}}</div>
                    <div class="td" style="width: 100px">{{data.tbGoodsColor.name}}</div>
                    <div class="td" style="width: 150px">￥{{data.costPrice | toFixed2}}</div>
                    <div class="td" style="width: 200px;">
                        <div v-if="'0,1'.indexOf(globalVariable.userInfo.tbCommunity.type) !== -1">
                            ￥{{data.price | toFixed2}}
                        </div>
                        <div v-if="'2,3,4'.indexOf(globalVariable.userInfo.tbCommunity.type) !== -1">
                            <div v-if="data.tbGoodsSpecificationColorUserTypeList" style="width: 180px;">
                                <u-read-more :toggle="data.toggle" :show-height="150" :shadow-style="{'margin-top': '0px', 'padding-top': '0px'}"
                                             :key="data.toggleId" @open="data.toggle = true; $forceUpdate();"
                                             @close="data.toggle = false; $forceUpdate();" close-text="查看所有客户类型价格">
                                    <scroll-view scroll-x="true">
                                        <div class="table table-bordered" style="text-align: center; background: white;">
                                            <div class="tr" v-for="(innerData, index2)  in data.tbGoodsSpecificationColorUserTypeList" :key="innerData.id">
                                                <div class="td">
                                                    <div>{{'innerData.tbCommunityUserType.name'|toValue(innerData)}}￥{{innerData.price | toFixed2}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </scroll-view>
                                </u-read-more>
                            </div>
                            <u-button type="success" size="mini" style="margin-top: 4px;" v-if="data.toggle" @click="data.toggle = false; $forceUpdate();">
                                关闭展开状态
                            </u-button>
                        </div>
                    </div>
                    <div class="td" style="width: 150px">￥{{data.marketPrice | toFixed2}}</div>
                    <div class="td" style="width: 100px">{{data.stockNumber}}</div>
                    <div class="td" style="width: 100px">{{data.displayOrder}}</div>
                    <div class="td" style="width: 600px">

                        <div style="margin-top: 10px; text-decoration: underline;" v-if="!data.tbStorePromotion"
                             @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-store-manage/store-platform-store-promotion/store-platform-store-promotion-add/index', {goodsId: data.goodsId, goodsSpecificationId: data.goodsSpecificationId, goodsColorId: data.goodsColorId, excludeSubCods: '41,42,43'}, data)">
                            添加促销
                        </div>

                        <div class="table" style="width: 600px; overflow: auto;" v-if="data.tbStorePromotion">
                            <div class="tr">
                                <div class="td" style="width: 200px">促销方式</div>
                                <div class="td" style="width: 200px">促销时间</div>
                                <div class="td" style="width:100px">促销状态</div>
                                <div class="td" style="width:100px">操作</div>
                            </div>
                            <div class="tr" :key="data.tbStorePromotion.id">
                                <div class="td" style="width: 200px">
                                    <div v-for="(item, index) of data.tbStorePromotion.typeTextList" :key="data.tbStorePromotion.id">{{item['typeText']}}</div>
                                </div>
                                <div class="td" style="width: 200px">
                                    <div>{{data.tbStorePromotion.startTime}}</div>
                                    <div>至</div>
                                    <div>{{data.tbStorePromotion.endTime}}</div>
                                </div>
                                <div class="td" style="width: 100px">
                                    {{data.tbStorePromotion.statusText}}
                                </div>
                                <div class="td" style="width: 100px">
                                    <div style="margin-top: 10px; text-decoration: underline;"
                                         @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-store-manage/store-platform-store-promotion/store-platform-store-promotion-edit/index', {id: data.tbStorePromotion.id, excludeSubCods: '41,42,43'}, data.tbStorePromotion)">
                                        编辑
                                    </div>
                                    <div style="margin-top: 10px; text-decoration: underline;" @click="deletePromotionById(data.tbStorePromotion)">
                                        删除
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="td" style="width: 100px">
                        <div style="margin-top: 10px; text-decoration: underline;"
                             @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-goods-manage/store-platform-goods/store-platform-goods-specification-color/store-platform-goods-specification-color-edit/index', null, data)">
                            编辑
                        </div>
                        <div style="margin-top: 10px; text-decoration: underline;" @click="deleteTbGoodsSpecificationColorById(data, index)">
                            删除
                        </div>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 50px;" v-if="!tbGoodsSpecificationColorList.length">
            <u-empty text="数据为空" mode="data"></u-empty>
        </div>

        <div style="padding-bottom: 5px;"></div>

        <u-button
                @click="navigateTo(`/pages/sub/sub2-store-platform/store-platform/store-platform-goods-manage/store-platform-goods/store-platform-goods-specification-color/store-platform-goods-specification-color-add/index?goodsId=${goodsId}`, null, findTbGoodsSpecificationColorList)">
            新增规格&颜色关系
        </u-button>
    </view>
</template>

<script>

    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbStorePromotionService} from "@/dev/services/tb-store-promotion.service";
    import {TbGoodsSpecificationColorService} from "@/dev/services/tb-goods-specification-color.service";

    export default {
        props: ["goodsId"],
        data() {
            return {
                tbGoodsSpecificationColorList: []
            }
        },
        onReady() {
            const _self = this;
        },
        methods: {
            findTbGoodsSpecificationColorList() {
                const _self = this;
                new TbGoodsSpecificationColorService().findTableListCascade({
                    goodsId: _self.goodsId
                }).then(result => {
                    _self.tbGoodsSpecificationColorList = [];
                    _self.$nextTick(() => {
                        result.list.forEach((item, index) => {
                            item.toggleId = item.id + CommonUtil.generateUUID();
                            item.toggle = false;
                        });
                        _self.tbGoodsSpecificationColorList = result.list;
                        _self.$forceUpdate();
                    });
                });
            },
            deleteTbGoodsSpecificationColorById(item, index) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '确定删除吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbGoodsSpecificationColorService().batchDeleteTbGoodsSpecificationColorByIds(item.id).then(result => {
                                _self.tbGoodsSpecificationColorList.splice(index, 1);
                            });
                        }
                    }
                });
            },
            /**
             * 删除促销活动
             * @param item
             */
            deletePromotionById(item) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '确定删除吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbStorePromotionService().batchDeleteTbStorePromotionByIds(item.id).then(result => {
                                _self.findTbGoodsSpecificationColorList();
                            });
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
